<template>
	<view class="register">
		<div class="reg-banner">
			<div class="logo">
				<image src="../../static/style3.webp" mode=""></image>
			</div>
			<div class="reg-list">
				<ul>
					<li>
						<div class="reg-list">
							<text>昵称：</text>
							<input type="text" placeholder="请输入您的昵称" placeholder-style="color: #9c9c9c"
								v-model="nickName">
						</div>
					</li>
					<li>
						<div class="reg-list">
							<text>账号：</text>
							<input type="text" placeholder="请输入您的账号" placeholder-style="color: #9c9c9c"
								v-model="account">
						</div>
					</li>
					<li>
						<div class="reg-list">
							<text>密码：</text>
							<input type="password" placeholder="请输入您的密码" placeholder-style="color: #9c9c9c"
								v-model="password">
						</div>
					</li>
				</ul>
			</div>
			<div class="reg-btn">
				<ul>
					<li @click="goLogin()"><text>返回登录</text></li>
					<li @click="addInp()">注册用户</li>
				</ul>
			</div>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickName: '',
				account: '',
				password: '',
				regExp: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
				userInfo: {},
				avatar: 'https://p3-passport.byteimg.com/img/user-avatar/9856d089b7ba2b7dd9ebbbd43c9c4253~180x180.awebp',
				timer: null
			}
		},
		onLoad() {

		},
		methods: {
			async addInp() {
				if (this.nickName.length == 0 || this.account.length == 0 || this.password.length == 0) {
					uni.showToast({
						title: '输入框不能空值',
						icon: 'none'
					})
					return
				}
				if (!this.regExp.test(this.account)) {
					uni.showToast({
						title: '账号不是邮箱格式',
						icon: 'none'
					})
					return
				} else {
					this.userInfo.user_nickName = this.nickName;
					this.userInfo.user_account = this.account;
					this.userInfo.user_password = this.password;
					this.userInfo.user_avatar = this.avatar
					console.log(this.userInfo);
					//查询账号
					await uniCloud.callFunction({
							name: 'list_user',
							data: {
								user_account: this.account
							}
						})
						.then(content => {
							console.log('1.0', content);
							let {
								result: {
									data
								}
							} = content;
							if (data.length == 0) {
								//调用云函数，添加书架
								uniCloud.callFunction({
										name: 'user',
										data: {
											...this.userInfo
										}
									})
									.then(content => {
										console.log('1.0', content);
										let {
											result
										} = content;
										if (result) {
											uni.showToast({
												title: '注册成功',
												icon: 'success'
											})
											this.timer = setInterval(() => {
												uni.navigateTo({
													url: '../login/login'
												})
											}, 1500)
										}
									})
							} else {
								for (let k = 0; k < data.length; k++) {
									if (data[k].user_account == this.account) {
										uni.showToast({
											title: '用户已存在',
											icon: 'none'
										})
										return
									} else {
										uniCloud.callFunction({
												name: 'user',
												data: {
													...this.userInfo
												}
											})
											.then(content => {
												console.log('1.0', content);
												let {
													result
												} = content;
												if (result) {
													uni.showToast({
														title: '注册成功',
														icon: 'success'
													})
													this.timer = setInterval(() => {
														uni.navigateTo({
															url: '../login/login'
														})
													}, 1500)
												}
											})
									}
								}
							}
						})

				}


			}
			,
			goLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.register {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		height: 1246rpx;
		opacity: 1;
		overflow: hidden;

		.reg-banner {
			width: 90%;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			// align-items: center;
			border-radius: 40rpx;
			margin: 80rpx auto 0;
			border: 1px solid #f5841a;
			height: 88%;
			background-color: #fceccc;

			.logo {
				margin: 0 auto;
				width: 440rpx;
				height: 340rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.reg-list {
				width: 90%;
				margin: 0 auto;

				ul {
					width: 100%;
					list-style: none;
					padding: 0;

					// margin: 0;
					li {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						// padding: 0;
						// padding: 5rpx 10rpx;
						border-bottom: 1px solid #f5841a;
						margin-bottom: 30rpx;
						padding-bottom: 20rpx;

						// box-sizing: border-box;
						.reg-list {
							display: flex;
							align-items: center;

							text {
								margin-right: 10rpx;
							}

							input {
								// line-height: 100rpx;
								font-size: 14px;
								margin-top: 3rpx;
							}
						}
					}
				}
			}

			.reg-btn {
				width: 100%;
				margin-top: 40rpx;

				ul {
					display: flex;
					justify-content: space-evenly;
					list-style: none;
					padding: 0;
					align-items: center;

					li {
						width: 200rpx;
						height: 80rpx;
						font-size: 14px;
						text-align: center;
						line-height: 80rpx;
						color: #fceccc;
						border-radius: 25px;
						background: linear-gradient(90deg, rgba(247, 136, 23, 1) 0%, rgba(232, 111, 45, 1) 100%);
					}
				}
			}
		}
	}
</style>